Product Detail
Product detail page is the page where user can see the details of a product.
Product Detail Page Blocks
Block Name | Description | Image |
---|---|---|
appmaker/shopify-variation-listner | This block is used to listen to the product variation changes. This is very important. This block should be added to the page. | |
appmaker/shopify-product-image | This block is used to display the product image. | ![]() |
appmaker/shopify-product-data | This block is used to display the product data like title, price, sale price, offer, etc. | |
appmaker/product-counter | This block is used to display or update the quantity of a product. | |
appmaker/shopify-product-variation | This block is used to display the product variations. | |
appmaker/shopify-product-description | This block is used to display the product description. | ![]() |
appmaker/shopify-related-product-scroller | This block is used to display the related products. | ![]() |
appmaker/shopify-product-pbp-buttons | This block is used to display the product buttons like add to cart, buy now, etc. |
example page:
Block customization example:
1. Create a new component.
Product Data component (Sample code)
Note: You can use the
useProductDetail
hook to get the product data. The hook is available in the@appmaker-xyz/shopify
package. Refer to the useProductListItem documentation for more details.